<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span> html 的 input text</span>
      </div>
    </template>
    ref 的方式：
    <input
      v-model="refName"
      type="text"
      class="el-input__inner"
      placeholder="原生文本框"
    ><br>
    
    <br>reactive 的 name：
    <input
      v-model="retName.name"
      class="el-input__inner"
      type="text"
      placeholder="传递对象"
    ><br>
    <br>原生防抖：
    <input
      v-model="deb"
      class="el-input__inner"
      type="text"
      placeholder="原生文本框的防抖"
    ><br>
  </el-card>
  <br>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span> UI库 的 input text</span>
      </div>
    </template>
    UI库的 input 的 防抖：
    <el-input
      v-model="deb"
    ></el-input>
  </el-card>
  <br>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span> 使用对象绑定属性</span>
      </div>
    </template>
    HTML 的 input
    <input
      v-model="refName"
      v-bind="propsText"
    ><br>
    UI库
    <el-input
      v-model="deb"
      v-bind="propsText"
    ></el-input>
  </el-card>
  <br>
  <input type="button" @click="set1" value="设置 ref 的 name"> &nbsp; &nbsp; 
  <input type="button" @click="set2" value="设置 reactive 的 name"><br>
  <hr>
  ref 的 name：{{refName}}<br>
  防抖 的 name：{{deb}}<br>
  reactive 的 name：{{retName.name}}<br>

</template>

<script>
  import {ref, reactive, customRef, nextTick} from 'vue'
  import { ElCard, ElInput } from 'element-plus'

  // 原生 HTML 的防抖
  function useDebouncedRef(value, delay = 300) {
    let timeout
    return customRef((track, trigger) => {
      return {
        get() {
          track()
          // console.log('触发 get：', value)
          return value
        },
        set(newValue) {
          clearTimeout(timeout)
          // console.log('触发 set1：', newValue)
          timeout = setTimeout(() => {
            value = newValue
            // console.log('执行 setTimeout：', newValue)
            trigger()
          }, delay)
        }
      }
    })
  }
</script>

<script setup>

  const propsText = {
    type: 'text',
    maxlength: 10,
    readonly: false,
    autofocus: true,
    class: 'el-input__inner',
    placeholder: '用对象绑定属性'
  }
  // 防抖测试
  const deb = useDebouncedRef('hello')

  const refName = ref('基础类型的响应性')

  const retName = reactive({
    name: '对象的响应性',
    age: 18
  })

  // ref 类型，修改值。
  const set1 = () => {
    refName.value = new Date().valueOf()
  }

  // reactive 类型，修改值。
  const set2 = () => {
    retName.name = new Date().valueOf()
  }

</script>